<template>
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo">
        <span v-if="!collapsed">{{ title }}</span>
      </div>
      <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys" @openChange="onOpenChange" v-model:openKeys="openKeys">
        <template v-for="(item, index) in userdata.menuList" :key="index">
          <template v-if="item.children">
            <a-sub-menu :key="item.title">
              <template v-slot:title>
                <span>
                  <component :is="item.icon"></component>
                  <span>{{ item.title }}</span>
                </span>
              </template>
              <template v-for="item in item.children" :key="item.path">
                <a-menu-item>
                  <span>
                    <router-link :to="{ path: item.path }"></router-link>
                    {{ item.title }}
                  </span>
                </a-menu-item>
              </template>
            </a-sub-menu>
          </template>

          <template v-else>
            <a-menu-item :key="item.path">
              <component :is="item.icon"></component>
              <span>
                <router-link :to="{ path: '/index' }"></router-link>
                {{ item.title }}
              </span>
            </a-menu-item>
          </template>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #001529; padding: 0 100px; height: 68px">
        <a-dropdown class="dropdown-link" :trigger="['click']">
          <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
            <SettingFilled /> {{ userdata ? userdata.name : "" }}
            <DownOutlined />
          </a>
          <template v-slot:overlay style="text-align: center">
            <a-menu>
              <a-menu-item key="0" @click="changePassword">
                修改密码
              </a-menu-item>
              <a-menu-item key="1" @click="signOut"> 退出登录 </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <TagMenu @onRouterKey="onrouterkey" />
        <div :style="{
            padding: '24px',
            background: '#fff',
            transition: 'all 0.3s ease-in',
          }">
          <router-view v-slot="{ Component }">
            <!-- <transition> -->
            <keep-alive include="index">
              <component :is="Component" />
            </keep-alive>
            <!-- </transition> -->
          </router-view>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        {{ footers }}
      </a-layout-footer>
    </a-layout>
  </a-layout>
  <SetPass :name="userdata ? userdata.name : ''" :modalvisible="modalVisible" @onshutdown="onshutdown" />
</template>
<script lang='ts'>
import {
  DownOutlined,
  SettingFilled,
} from "@/components/AntDesign/icons/icons";
import { ReturnRouterInt, UserDataInterface, DataTypes } from "./types/index";
import { menuList } from "./method/InitMenuList";
import TagMenu from "@/components/TagMenu/TagMenu.vue";
import SetPass from "@/components/Home/SetPass/SetPass.vue";
import { reactive, toRefs } from "vue";
import $router from "@/router";
export default {
  components: { DownOutlined, SettingFilled, TagMenu, SetPass },

  setup() {
    const userdata: UserDataInterface = JSON.parse(
      localStorage.getItem("userdata") as string
    );

    if (userdata) {
      const router: ReturnRouterInt[] = userdata.router;
      userdata.menuList = menuList(router);
      // console.log(userdata.menuList);
    }

    const data = reactive({
      footers: process.env.VUE_APP_FOOTERS as string,
      title: (window as any).$TITLE as string,
      selectedKeys: [$router.currentRoute.value.path],
      openKeys: [$router.currentRoute.value.meta.title],
      collapsed: false,
      modalVisible: false,
      tagstyle: "",
      userdata,
    } as DataTypes);

    /* 路由变化 */
    function onrouterkey(value: { path: string; title: string }): void {
      data.selectedKeys = [value.path];
      data.openKeys = [value.title];
    }

    /* 修改密码弹窗事件 */
    function onshutdown(val: boolean) {
      data.modalVisible = val;
    }

    /* 修改密码 */
    function changePassword() {
      data.modalVisible = true;
    }

    /* 只展开当前父级菜单 */
    function onOpenChange(openKeys: string[]): void {
      data.openKeys = openKeys[openKeys.length - 1]
        ? [openKeys[openKeys.length - 1]]
        : [];
    }

    /* 退出登录 */
    function signOut(): void {
      $router.push({ path: "/login" });
      localStorage.removeItem("token");
      localStorage.removeItem("userdata");
    }

    return {
      ...toRefs(data),
      signOut,
      onOpenChange,
      changePassword,
      onrouterkey,
      onshutdown,
    };
  },
};
</script>

<style lang="less" scoped>
#components-layout-demo-side {
  height: 100%;
  .logo {
    height: 32px;
    margin: 16px;
    text-align: center;
    color: white;
    line-height: 32px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dropdown-link {
    float: right;
    height: 68px;
    color: white;
  }
}
</style>
